import React from 'react'

import Modal from 'lib/components/Modal.jsx'
import {Row,Cell} from 'lib/components/Row.jsx'
import imgSrc from 'lib/util/ImageSource'

export default class DownloadAndroidView extends Modal {
  constructor(props, context) {
    super(props, context);
  }

  renderHeader(){
    return (
      <h4>下载</h4>
    );
  }
  renderBody(){
    return (
      <Row>
        <Cell span={12}>
          <div style={{marginLeft:'45px'}}>
            <a
              className="btn-blue"
              download
              href="https://download.oneapm.com/mi/demo/Online_demo.apk"
              style={{padding:'8px 13px'}}>
              <i className="iconfont" style={{marginRight:'10px'}}>&#xe66c;</i>
              Android
            </a>
            <div style={{
              color:'#D3D3D2',
              fontSize:'12px',
              marginTop:'5px'
            }}>下载到电脑</div>
          </div>
        </Cell>
        <Cell span={12}>
          <div style={{marginLeft:'15px'}}>
            <img src={imgSrc('qrcode-for-android-download.png')} />
            <div style={{
              color:'#D3D3D2',
              fontSize:'12px',
              marginTop:'5px'
            }}>手机扫描二维码下载</div>
          </div>
        </Cell>
      </Row>
    )
  }
  renderFooter(){
    return (
      <button className="btn-green" type="button" onClick={this.close}>取消</button>
    );
  }
  render(){
    var styleObj = {
      left: 0,
      top: 0
    };
    if(this.props.draggable){
      styleObj.position = 'absolute';
    }
    if(this.state && this.state.position){
      styleObj.left = this.state.position.x
      styleObj.top = this.state.position.y
      styleObj.position = 'absolute'
    }
    return (
      <div>
        <div ref="dialog" className="dialog" style={styleObj}>
          <div className="dialog-header" ref="header">
            <a className="close iconfont" href="javascript:;" onClick={this.close}>&#xe63d;</a>
            {this.renderHeader()}
          </div>
          <div className="dialog-content" style={{minWidth:'381px'}}>
            {this.renderBody()}
          </div>
          <div className="dialog-footer">
            {this.renderFooter()}
          </div>
        </div>
        {
          this.props.modal?(
            <div className="dialog-backdrop" onClick={this.close}></div>
          ):null
        }

      </div>
    )
  }
}
